<template>
    <view class="user-box">
        <up-navbar title="蕴明计划维修管理系统" placeholder>
            <template #left> <text style="color: #fff">></text> </template>
        </up-navbar>
        <view class="userinfo-box">
            <view class="info-box">
                <view class="username">你好，张三</view>
                <view class="role">
                    <up-tag text="电工" size="mini" type="warning"></up-tag>
                </view>
            </view>
            <view class="date-box">
                <text class="data">{{ currentDate }}</text>
                <text class="week">{{ currentWeek }}</text>
            </view>
        </view>
        <up-button
            type="primary"
            text="退出登录"
            @click="onLogoutClick"
        ></up-button>
        <up-tabbar
            :value="data.currentPage"
            @change="onPageChange"
            :fixed="true"
            :placeholder="true"
            :safeAreaInsetBottom="true"
        >
            <up-tabbar-item
                text="首页"
                icon="home"
                name="home"
            ></up-tabbar-item>
            <up-tabbar-item
                text="我的"
                icon="account"
                name="user"
            ></up-tabbar-item>
        </up-tabbar>
    </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import dayjs from 'dayjs';
const data = reactive({
    form: {},
    currentPage: 'user',
});

const currentDate = computed(() => {
    return dayjs().format('MM-DD');
});

const currentWeek = computed(() => {
    const num = dayjs().day();
    switch (num) {
        case 1:
            return '周一';
        case 2:
            return '周二';
        case 3:
            return '周三';
        case 4:
            return '周四';
        case 5:
            return '周五';
        case 6:
            return '周六';
        case 7:
            return '周日';
    }
});
const onPageChange = (e) => {
    uni.navigateTo({
        url: '/pages/home/home',
    });
};

const onLogoutClick = () => {
    uni.navigateTo({
        url: '/pages/login/login',
    });
};
</script>

<style lang="scss">
.user-box {
    padding: 20rpx;
    .userinfo-box {
        margin-bottom: 20rpx;
        .info-box {
            display: flex;
            .username {
                font-size: 18px;
                margin-right: 10rpx;
            }
            .role {
            }
        }
        .date-box {
            font-size: 14px;
            color: #b5bec9;
            .data {
            }
            .week {
                margin-left: 10rpx;
            }
        }
    }
}
</style>
